<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传下载测试</title>
</head>
<body>
<script>

  function uploadFiles() {
    var form = document.getElementById('uploadForm');
    var formData = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://127.0.0.1:8080/upload', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            // 假设服务器返回的是JSON格式的数据
            var filesInfo = JSON.parse(xhr.responseText);
            console.log(filesInfo);
            if(filesInfo.Code == 0){
                displayDownloadList(filesInfo);
            }else{
                alert(filesInfo.Msg)//  弹出其它严重错误
            }
           
        } else {
            console.error('Request failed. Returned status of ' + xhr.status);
        }
    };
    xhr.send(formData);
}

function displayDownloadList(filesInfo) {
    var NOfiles = filesInfo.NOfiles;
    var failList = document.getElementById('failList');
    failList.innerHTML = ''; // 清空现有内容
    NOfiles.forEach(function (file) {
        var li = document.createElement('li');
        li.textContent = file.name + "   失败原因：" + file.msg;
        failList.appendChild(li);
    });

    var OKfiles = filesInfo.OKfiles;
    var list = document.getElementById('downloadList');
    list.innerHTML = ''; // 清空现有内容
    OKfiles.forEach(function (file) {
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.href = file.url; // 文件URL应由服务器提供
        a.textContent = file.name;
        li.appendChild(a);
        list.appendChild(li);
    });
}
</script> 
    <p>默认只能上传jpg和png后缀文件，文件尺寸最大300kb。可通过“Gin工具类.上传文件”方法内的参数修改。</p>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="files" id="files" multiple />
        <button type="button" onclick="uploadFiles()">上传文件</button>
    </form>
  <p>成功列表（上传后可点击链接下载）：</p>
  <ul id="downloadList"></ul>
    <p>&nbsp;</p>
    <p>失败列表：</p>
    <ul id="failList"></ul>
</body>
</html>